<template>
  <el-dialog
    v-model="showDialog"
    title="下载申请"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="80%"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    destroy-on-close
    align-center
  >
    <el-form :model="form" label-width="120px" ref="formRef">
      <el-row justify="start">
        <el-col :span="24">
          <el-form-item
            label="下载目的"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写下载目的' }"
            prop="objective"
          >
            <el-input type="textarea" v-model="form.objective" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="下载用途"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写下载用途' }"
            prop="useTo"
          >
            <el-input type="textarea" v-model="form.useTo" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="水印"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择下载水印' }"
            prop="watermark"
          >
            <el-select v-model="form.watermark" placeholder="请选择水印">
              <el-option
                v-for="item in markList"
                :key="item.id"
                :label="item.text"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="name">
            <el-input type="textarea" v-model="form.remark" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="下载信息">
            <el-table :data="list" style="width: 100%" highlight-current-row>
              <el-table-column
                v-for="(column, index) in columns"
                :key="index"
                :prop="column.prop"
                :label="column.label"
                align="center"
              >
                <template #default="scope">
                  <el-image
                    v-if="imaged(scope.row[column.prop])"
                    :src="buildImage(column.prop, scope.row)"
                    style="max-width: 50px"
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><icon-picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import * as downApi from '@/api/down'
import * as watermarkApi from '@/api/watermark'
const markList = ref([])
const props = defineProps({
  metaId: {
    default: '',
    type: String
  },
  type: {
    default: -1,
    type: Number
  },
  columns: {
    default: null,
    type: Array
  },
  list: {
    default: null,
    type: Array
  }
})
const showDialog = ref(false)
const openDialog = async () => {
  showDialog.value = true
  markList.value = await watermarkApi.list()
}
const closeDialog = () => {
  showDialog.value = false
}
const form = ref({})
function isValidJson(str) {
  try {
    JSON.parse(str)
    return true
  } catch (e) {
    return false
  }
}
function isNumber(str: string): boolean {
  return /^\d+$/.test(str) // 只包含数字的正则表达式
}
const imaged = (row) => {
  if (isNumber(row)) {
    return false
  }
  return isValidJson(row)
}
const buildImage = (name, row) => {
  if (row[name] && row[name] != 'null') {
    return JSON.parse(row[name].replaceAll('\\', ''))[0].url
  } else {
    return ''
  }
}
const save = async () => {
  form.value.type = props.type
  form.value.metaId = props.metaId
  let ids = []
  let data = props.list
  data.forEach((item) => {
    ids.push(item.id)
  })
  form.value.data = ids
  await downApi.application(form.value)
  ElMessage.success('下载申请成功，请等待审核!')
  closeDialog()
}
defineExpose({
  openDialog
})
</script>
